<!-- ref操作DOM的4种方式 -->
<script lang="ts" setup>
import { message } from 'ant-design-vue'
import { ref, reactive } from 'vue'
const sectionRef1 = ref()
const listRef = ref()
const state = reactive({
  list: [
    { title: `1`, bgColor: '#ecffc0' },
    { title: `2`, bgColor: '#c0ffcb' },
    { title: `3`, bgColor: '#c0f6ff' },
    { title: `4`, bgColor: '#e6b6e2' },
    { title: `5`, bgColor: '#f0bea1' },
  ],
  reflist: [] as Array<any>,
})
let height = 100
const higherAction = (type: string) => {
  switch (type) {
    case 'high':
      height += 50
      break
    case 'short':
      if (height <= 50) {
        message.warning('不能在矮啦~')
        break
      }
      height -= 50
      break
  }

  sectionRef1.value.style = `height: ${height}px`
}
const updateHeight = (index: number) => {
  let height = listRef.value.children[index].style.height
    ? listRef.value.children[index].style.height
    : '32px'
  //没有行内样式，获取的style.height为空字符串
  height = Number(height.replace('px', ''))
  listRef.value.children[index].style.height = `${height + 10}px`
}
const higherAction3 = (index: number) => {
  let height = state.reflist[index].style.height
    ? state.reflist[index].style.height
    : '32px'
  //没有行内样式，获取的style.height为空字符串
  height = Number(height.replace('px', ''))
  state.reflist[index].style.height = `${height + 10}px`
}
const setRefAction3 = (el: any) => {
  console.log(el)
  state.reflist.push(el)
}
/**
 * 自定义指令操作Dom
 */
const vFocus = {
  mounted: (el: any) => el.focus(),
}
const vCopy = {
  beforeMount(el: any, binding: any) {
    el.targetContent = binding.value
    const success = binding.arg
    el.addEventListener('click', () => {
      if (!el.targetContent) return message.warning('没有可复制的内容~')
      //创建textarea标签
      const textarea = document.createElement('textarea')
      //设置相关属性
      textarea.readOnly = true
      textarea.style.position = 'fixed'
      textarea.style.top = '-99999px'
      //把选中的内容复制给它的value属性
      textarea.value = el.targetContent
      //插入到页面
      document.body.appendChild(textarea)
      //调用onselect()方法
      textarea.select()
      const res = document.execCommand('Copy')
      res && success ? success(el.targetContent) : message.success('复制成功~')
      // 移除textarea标签
      document.body.removeChild(textarea)
    })
  },
  updated(el: any, binding: any) {
    // 实时更新最新的目标内容
    el.targetContent = binding.value
  },
  unmounted(el: any) {
    el.removeEventListener('click', () => {})
  },
}
const msg = ref<string>('我是目标内容')
</script>

<template>
  <div class="title">
    <h2>ref操作DOM的4种方式</h2>
  </div>
  <div class="case-box">
    <div class="case-1">
      <h3>通过ref value 直接操作DOM</h3>
      <a-space>
        <a-button class="btn" type="primary" @click="higherAction('high')"
          >变高</a-button
        >
        <a-button class="btn" type="primary" @click="higherAction('short')"
          >变矮</a-button
        >
      </a-space>
      <div ref="sectionRef1" class="ref-section-1"></div>
    </div>
    <div class="case-2">
      <h3>通过父容器的ref遍历拿到dom引用</h3>
      <div ref="listRef" class="list-section">
        <div
          :style="{ backgroundColor: item.bgColor }"
          class="item-ref"
          v-for="(item, index) of state.list"
          :key="index"
          @click="updateHeight(index)"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
    <div class="case-3">
      <h3>通过:ref将dom引用放到数组中</h3>
      <div
        :style="{ backgroundColor: item.bgColor }"
        class="item-ref"
        :ref="setRefAction3"
        @click="higherAction3(index)"
        v-for="(item, index) of state.list"
      >
        {{ item.title }}
      </div>
    </div>
  </div>
  <div class="title">
    <h2>自定义指令操作Dom</h2>
    <input v-focus />
    <div style="width: 100%">
      <h2>自定义Copy指令</h2>
      <div class="copy-box">
        <p><span>订单号：</span><span>1667183733636</span></p>
        <button v-copy:[success]="msg">点击复制</button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.title {
  text-align: center;
  .copy-box {
    display: flex;
    flex-direction: row;
    p {
      span {
        line-height: 40px;
      }
    }
  }
}
.case-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .case-1 {
    .ref-section-1 {
      width: 200px;
      height: 100px;
      background-color: #c0f6ff;
      transition: all 0.5s ease-in-out;
    }
    .btn {
      margin-bottom: 20px;
    }
  }
  .item-ref {
    padding: 5px;
    transition: all 0.5s ease-in-out;
  }
}
</style>
